import { Form } from "antd";
import React, { useEffect, useImperativeHandle } from "react";
import { useLocation } from "react-router-dom";
import { RowElement } from "./tableSearchPanelConfig";
import styl from "./tableSearchPanel.module.scss"
/**
 * @description 表单搜索面板组件
 *
 * @param {Object} props - 组件的属性对象
 * @param {Function} props.onRef - 回调引用函数，用于获取表单实例
 * @param {Array} props.fields - 表单字段数组，每个字段对象可包含name、parseFields、inputProps等属性
 * @param {Function} props.onSearch - 搜索回调函数，接收处理后的搜索参数作为参数
 * @param {boolean} props.hideSearchPanel - 是否隐藏搜索面板，默认为false
 * @param {Function} props.resetSearchParams - 重置搜索参数的回调函数
 * @param {Object} props.formItemLayout - 表单项布局配置对象，包含labelWrap、labelalig、labelCol、wrapperCol等属性
 * @param {Object} props.initialValues - 表单初始值对象
 *
 * @returns {JSX.Element} - 返回渲染的JSX元素
 */
const TableSearchPanel = ({
    onRef,
    fields = [],
    onSearch = Function,
    hideSearchPanel = false,
    resetSearchParams = null,
    formItemLayout = {
        labelWrap: true, //标签超长换行；
        labelalig: "right",//标签右对齐
        labelCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 5,
            },
        },
        wrapperCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 16,
            },
        },
    },
    initialValues = {}
}) => {
    const location = useLocation();
    const [form] = Form.useForm();

    /**@description 处理要拆分字段 */
    const disposeDepenceFiled = (object) => {
        let res = {};
        fields.forEach(item => {
            if (item.parseFields && Array.isArray(item.parseFields)) {
                item.parseFields.forEach((dis, index) => {
                    res[dis] = object[item?.name] ? object[item?.name][index] : undefined;
                })
            } else {
                res[item.name] = object[item?.name] || undefined;
            }
        })
        return res;
    }

    // 初始化表单数据
    const initForm = () => {
        fields.forEach(item => {
            if (item?.inputProps?.defaultValue) {
                form.setFieldsValue({ [item?.name]: item?.inputProps?.defaultValue })
            }
        })

    }




    const onFinish = (values) => {
        let params = disposeDepenceFiled(values);
        onSearch(params)
    }

    // when form && location is change, reset form
    useEffect(() => {
        if (form) {
            form.resetFields();
            initForm();
        }
    }, [location.pathname, form])

    useImperativeHandle(onRef, () => ({
        //获取表单数据
        getFormDatas: () => {
            let object = {};
            object = form.getFieldsValue();
            let params = disposeDepenceFiled(object);
            return params;
        },
        form: form
    }))

    //获取表单初始值对象
    const initFormValues = (fields) => {
        let object = {};
        fields.map(item => {
            object[item.name] = item.initValue || undefined
        })
        return object;
    }


    return (
        <>
            {
                hideSearchPanel ?
                    null :
                    <div className={styl.tableScearchPanel} style={{ margin: "0 0 10px 0" }}>
                        <Form
                            initialValues={initFormValues(fields) || {}}
                            {...formItemLayout}
                            form={form}
                            onFinish={onFinish}
                            name="searchPanelForm"
                            className="ant-advanced-search-form"
                        >

                            <RowElement
                                resetSearchParams={resetSearchParams}
                                form={form}
                                fields={fields}
                            />
                        </Form>
                    </div>
            }
        </>

    )

}

export default TableSearchPanel;